<!DOCTYPE html>
<html lang="zh">
  <head>
    <title>寒冬利刃之Bootstrap</title>
    <link rel="icon" type="image/png" href="icon.png">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="static/js/errors.js"></script>
    <script src="static/js/jquery.min.js"></script>
    <script src="static/bootstrap/js/bootstrap.bundle.min.js"></script>
    <link href="static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="static/bootstrap-icons/font/bootstrap-icons.min.css" rel="stylesheet">
    <!--<script src="static/clipboard/dist/clipboard.min.js"></script>-->
  </head>
  <body style="background-color: whitesmoke; ">
    <div class="card mx-auto" style="width: 90%; ">
      <div class="card-header">
        <small class="badge bg-primary">置顶</small>
        <i class="bi bi-info-circle"></i>
        通知
      </div>
      <div class="card-body">
        <span>这个练手的小站已经废弃了，不过，可以去我的博客看看。</span>
        <a class="btn btn-outline-primary" href="https://hdlr.maozi.io" target="_blank">好的，那就去看看！</a>
      </div>
    </div>
    <br>
    <div class="card mx-auto" style="width: 90%; ">
      <img class="card-img-top" src="static/image/view.jpg" alt="" id="image">
      <div class="card-img-overlay">
        <h4 class="display-4 card-title" style="color: whitesmoke">欢迎来到本站！</h4>
        <p class="card-text" style="color: whitesmoke">现在，我们可以有下一步动作了。</p>
        <div class="btn-group">
          <a class="btn btn-primary" href="index.html#start" title="开始吧！">开始吧！</a>
          <a class="btn btn-light" href="exit.html" title="算了吧……">算了吧……</a>
        </div>
        <a class="btn btn-light float-end" target="_blank" id="view_image" title="查看图片" href="image_viewer.html?image=static/image/view.jpg">查看图片</a>
        <script>document.getElementById("view_image").href = `image_viewer.html?image=${location.href.substr(0, location.href.lastIndexOf("/"))}/static/image/view.jpg`; </script>
      </div>
      <div class="card-body">
        <h4 class="h4 card-title" id="start">开始</h4>
        <span>
          本站的一大
          <span class="text-warning"><strong>特色</strong></span>
          是拥有一个
          <span class="text-secondary"><small>寒酸</small></span>
          并且
          <span class="text-primary"><strong>无处不在</strong></span>
          的图片预览器,如果您想使用，可以点击
          <a class="card-link" title="无效链接，仅装饰用……"><strong>上方图片中的按钮</strong></a>
          。
        </span>
        <span class="lead">一般情况下，它可以预览任意图片。</span>
      </div>
    </div>
    <br>
    <div class="card mx-auto" style="width: 90%; ">
      <div class="card-body">
        <h4 class="h4 card-title">功能合集</h4>
        <span>
          详细一览本站的
          <a class="card-link" href="function.html" target="_blank" title="点击以查看现有功能"><strong>
            <i class="bi bi-hand-index-thumb"></i>
            现有功能
          </strong></a>
          。
        </span>
      </div>
    </div>
    <br>
    <div class="card mx-auto" style="width: 90%; ">
      <div class="card-body">
        <h4 class="h4 card-title">关于本站</h4>
        <span>
          <a class="card-link" href="father.html" target="_blank" title="点击以查看致敬站长"><strong>
            <i class="bi bi-hand-index-thumb"></i>
            致敬站长
          </strong></a>
          ：本站站长确实
          <span class="text-primary"><strong>值得被致敬</strong></span>
          。
        </span>
        <br>
        <span>
          <a class="card-link" href="copyright.html" target="_blank" title="点击以查看版权声明"><strong>
            <i class="bi bi-hand-index-thumb"></i>
            版权声明
          </strong></a>
          ：本站是有版权的！
        </span>
      </div>
    </div>
    <br>
    <center>
      <span class="text-secondary">
        欧拉公式：<var>e<sup>i&#x03C0; </sup></var>+1=0
      </span>
      <br>
      <span class="text-secondary"><small>
        为何在此？因为站长喜欢……
      </small></span>
    </center>
  </body>
</html>